<template>
    <div class="body">

        <div id="carouselExampleCaptions" class="carousel slide banner" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
                <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
                <li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
            </ol>
            <div class="carousel-inner bug">
                <div class="carousel-item active banner_2">
                    <img :src="banner1" class="d-block banner_bac" alt="...">
                    <img :src="banner1" class="d-block w-100" alt="...">
                    <div class="carousel-caption  d-md-block">
                        <h5>历时八年半，春物完结系列！</h5>
                        <p>轻小说第14卷确定2019年11月19日发售！</p>
                    </div>
                </div>
                <div class="carousel-item banner_2">
                    <img :src="banner2" class="d-block banner_bac" alt="...">
                    <img :src="banner2" class="d-block w-100" alt="...">
                    <div class="carousel-caption  d-md-block w-100"style="left: 0;right: 0;">
                        <h5></h5>
                        <p style="text-align: center;width: 100%;">青春不止，古典文学部来袭！</p>
                    </div>
                </div>
                <div class="carousel-item banner_2">
                    <img :src="banner3" class="d-block banner_bac" alt="...">
                    <img :src="banner3" class="d-block w-100" alt="...">
                    <div class="carousel-caption  d-md-block d3">
                        <h5>关于这个世界，还有多少我不了解的谜呢？</h5>
                        <p>5月的某一天，我亲眼目睹到一大群阿德利企鹅出现在牙科医院前面的空地正中间，一只又一只的企鹅，摇头晃脑地踱著步，在我们的小镇上引起了大骚动。</p>
                    </div>
                </div>
                <div class="carousel-item banner_2">
                    <img :src="banner4" class="d-block banner_bac" alt="...">
                    <img :src="banner4" class="d-block w-100" alt="...">
                    <div class="carousel-caption  d-md-block d4">
                        <h5>刀剑神域爱丽丝篇</h5>
                        <p>不容错过，最激烈的一战！</p>
                    </div>
                </div>
                <a class="carousel-control-prev sm" href="#carouselExampleCaptions" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next sm" href="#carouselExampleCaptions" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
            <div class="search_box ">
                <input type="text" placeholder="输入作品名/作者名">
                <div class="icon-search"></div>
            </div>
        </div>
        <div id="hot_book" class="hot_book container">
            <p>近七日热销书</p>
            <hr>
            <ul class="row">
                <li v-for="(item,index) in this.book_hot" v-if="index<8" class="my-col-3"  >
                    <router-link :to="{name:'detail',query:{name:item.name}}">
                        <img :src="item.http_img_url" alt="">
                        <p>{{item.name}}</p>
                    </router-link>
                </li>
                <!--<div style="clear:both;"></div>-->
            </ul>
        </div>
        <div class="category" id="category">
            <div class="top">
                <ul>
                    <li><span class="category_bac"><img :src="category_bac" alt=""></span><a href="#1">校园</a></li>
                    <li><span class="category_bac"><img :src="category_bac" alt=""></span><a href="#2">古风</a></li>
                    <li><span class="category_bac"><img :src="category_bac" alt=""></span><a href="#3">种田</a></li>
                    <div style="clear:both;"></div>
                </ul>
            </div>
            <div class="bottom">
                <ul>
                    <li><span class="category_bac"><img :src="category_bac" alt=""></span><a href="#4">魔幻</a></li>
                    <li><span class="category_bac"><img :src="category_bac" alt=""></span><a href="#5">游戏</a></li>
                    <li><span class="category_bac"><img :src="category_bac" alt=""></span><a href="#6">悬疑</a></li>
                    <div style="clear:both;"></div>
                </ul>
            </div>
        </div>
        <section v-for="(item,index) in book_recommend" class="category_books">
            <div class="category_name">
                <h3 :id="item.id">{{item.book_category}}</h3>
            </div>
            <div class="book">
                <aside>
                    <h3>今日推荐</h3>
                    <hr>
                    <p class="title">{{item.name}}</p>
                    <a><router-link :to="{name:'detail',query:{name:item.name}}"  class="bug_one" ><img :src="loading" :data-src="item.http_img_url" alt=""></router-link></a>
                    <p class="bug" v-html="item.introduction">
                    </p>
                </aside>
                <div class="box" style="position: relative">
                    <div class="line" style="left:0;"></div>

                    <div class="box_book">
                        <ul>
                            <li v-for="(item,index) in book.slice(10*(item.id-1),10*(item.id-1)+10)">
                                <router-link :to="{name:'detail',query:{name:item.name}}"  class="a">
                                    <img :src="loading" :data-src="item.http_img_url" alt="">
                                    <ul>
                                        <li><span>价格：</span><p>48.00元</p></li>
                                        <li><span>人气：</span><p>2333333</p></li>
                                    </ul>
                                </router-link>
                                <!--<a href="javascript:;" class="a"><img :src="loading" :data-src="item.http_img_url" alt=""></a>-->
                                <div class="bottom_box">
                                    <div class="box_1"></div>
                                    <div class="box_2"></div>
                                    <div class="box_3"></div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div style="clear:both;"></div>
            </div>

        </section>
        <section class="discount d-sm-none w-100">
            <div>
                <span>活动 / 折扣</span>
                <a href="#">
                    <img :src="discount" alt="">
                </a>
                <!--<p class="p1">我的青春恋爱物语果然有问题</p>-->
                <p>
                    <i>11.19~12.19</i>
                    <br/>
                    <strong>8折优惠</strong>
                </p>
            </div>
        </section>
        <section class="d-sm-none td-recommend">
            <h3>今日精品推荐</h3>
            <ul>
                <li v-for="(item,index) in book_recommend">
                    <a href="#">
                        <img :src="loading" :data-src="item.bug" alt="">
                        <!--{{item.id}}-->
                        <p>{{item.name}}</p>
                    </a>
                </li>
            </ul>
        </section>
        <div class="return_category"><a href="#category">返回</a></div>
    </div>

</template>
<script>
    import '../../assets/js/index.js'
    import category_bac from './other/images/category/category_bac1.png';
    export default {
        data(){
            return{
                book:[],
                book_hot:[],
                book_recommend:[],
                category_bac : 'http://127.0.0.1:3002/images/category/category_bac1.png',
                banner1: 'http://127.0.0.1:3002/images/banner_1.jpg',
                banner2: 'http://127.0.0.1:3002/images/banner_2.jpg',
                banner3: 'http://127.0.0.1:3002/images/banner_3.jpg',
                banner4: 'http://127.0.0.1:3002/images/banner_4.jpg',
                loading: 'http://127.0.0.1:3002/images/loading.gif',
                discount: 'http://127.0.0.1:3002/images/discount.jpg',
                recommend: 'http://127.0.0.1:3002/images/discount.jpg'
            }
        },created(){
            this.$axios.get('book',{
            }).then(res=>{
                // var _ = require('lodash')
                this.book =res.data
                var datas = res.data.map(x=>x)
                for(let i=0;i<59;i++)
                    for (let j=i+1;j<60;j++){
                        if(datas[i].sales<datas[j].sales){
                            let temp = datas[i]
                            datas[i] = datas[j]
                            datas[j] = temp
                        }
                    }
                this.book_hot = datas
            }).then(err=>{
                console.log(err)
            })

            this.$axios.get('book/category',{
            }).then(res=>{
                this.book_recommend =res.data
            }).then(err=>{
                console.log(err)
            })
        },
        mounted(){
        }
        ,beforeMount(){

        },
        updated(){
            //为解决的bug,执行两次
            //     var el = document.createElement('div')
            //     el.classList.add('w-100','r-sm')
            //     $('.my-col-3')[3].after(el)
            // 链接点击等等
            function wwc(x) {
                $('.a:eq('+x+')').mouseover(function () {
                    $('.bottom_box:eq('+x+')').children().css({"box-shadow": "0 0 .4rem 0 rgba(9,192,205,.8)"})
                })
                $('.a:eq('+x+')').mouseout(function () {
                    $('.bottom_box:eq('+x+')').children().css({"box-shadow": "0 0 .2rem 0 rgba(9,192,205,.8)"})
                })
                $('.a:eq('+x+')').click(function () {
                    let head = $('#bugxx').height()
                    $('.body').css({'margin-top':''+head+'px'})
                })
            }
            for (let i=0;i<7;i++){
                $('.my-col-3:eq('+i+')').click(function () {
                    let head = $('#bugxx').height()
                    $('.body').css({'margin-top':''+head+'px'})
                })
            }
            for (let i=0;i<5;i++){
                $('.bug_one:eq('+i+')').click(function () {
                    let head = $('#bugxx').height()
                    console.log(head)
                    $('.body').css({'margin-top':''+head+'px'})
                })
            }
            for(var i=0;i<60;i++){
                wwc(i)
            }
        },
    }
</script>
<style scoped>
    @import '../../assets/css/index.css';
</style>